<template>
  <div class="departments">
    <el-card>
      <template #header>
        <div>组织结构</div>
      </template>
      <div class="dree">
        <!-- <span class="i1">江苏传智播客教育科技股份有限公司</span>
        <span class="i2">负责人</span>
        <el-dropdown class="i3">
          <span>
            操作
            <i class="el-icon-arrow-down el-icon--right" />
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>添加子部门</el-dropdown-item>
              <el-dropdown-item>编辑部门</el-dropdown-item>
              <el-dropdown-item>删除部门</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown> -->
        <TreeItem :item="topInfo" />
      </div>
      <hr>
      <el-tree :data="list" :props="{ children: 'children' }">
        <template v-slot="{ data }">
          <TreeItem style="width: 100%" :item="data" @getData="getData" />
        </template>
      </el-tree>
    </el-card>
    <DialogItem :init-list="initList" @getData="getData" />
  </div>
</template>

<script>
import TreeItem from './components/tree-item.vue'
import DialogItem from '@/views/departments/components/dialogItem'
import { companyDepartment } from '@/api/departments.js'
export default {
  components: {
    TreeItem,
    DialogItem
  },
  data() {
    return {
      topInfo: { name: '传智', manager: '负责人', istop: true, id: '' },
      // 更新后的数据
      list: [],
      // 原始数据
      initList: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await companyDepartment()
      this.list = this.changeData(res.data.depts)
      this.initList = res.data.depts
      // console.log('部门列表', res)
    },
    changeData(arr, str = '') {
      return arr.filter((item) => {
        if (item.pid === str) {
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.departments {
  width: 100%;
  height: 100%;
  background-color: #fafafa;
  padding: 20px;
  .dree {
    width: 100%;
    display: flex;
  }
}
</style>
